<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    <meta name="viewport" content="width=device-width, initial-scale=1">-->
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <title>Title</title>
    <link href="/dev/views/slx/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="/dev/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/dev/views/slx/css/nav.css">
    <link rel="stylesheet" href="/dev/views/slx/css/search.css">
        <link rel="stylesheet" href="/dev/views/slx/css/index.css">
    <link rel="stylesheet" href="/dev/views/cxy/css/playerto.css">
    <style>
        .songss {
            margin-bottom: 20px;
        }

        .lyrics-container {
            max-height: 100px;
            overflow: hidden;
            transition: max-height 0.3s ease-in-out;
        }

        .lyrics-container.expanded {
            max-height: initial;
        }

        .toggle-btn {
            cursor: pointer;
            color: #666;
            font-size: 12px;
        }

        .toggle-btn:hover {
            color: #c33;
        }
    </style>
</head>
<body>
<div id="app"></div>
<!--播放器-->
<div id="QPlayer">
    <div id="pContent">

        <div id="player">
            <span class="cover"></span>
            <div class="ctrl">
                <div class="musicTag marquee">
                    <strong>Title</strong>
                    <span> - </span>
                    <span class="artist">Artist</span>
                </div>
                <div class="progress">
                    <div class="timer left">0:00</div>
                    <div class="contr">
                        <div class="rewind icon"></div>
                        <div class="playback icon"></div>
                        <div class="fastforward icon"></div>
                    </div>
                    <div class="right">
                        <div class="liebiao icon"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ssBtn" style="background:#000 none repeat scroll 0% 0%">
            <div class="adf"></div>
        </div>
    </div>
    <ol id="playlist"></ol>
</div>
<!---->
<div class="mainWrap" style="height: auto">
    <div class="main" style="position: relative">
        <div class="search" style="position: absolute; height: 30px">
            <div style="padding: 30px 100px 10px;">
                <form class="bs-example bs-example-form" role="form"
                      style="    margin-left: 130px;height: 34px;width: 500px;">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                                <input type="text" class="form-control" id="search">
                                <span class="input-group-btn" style="width: 27%;">
                        <button class="btn btn-default" type="button" onclick="search1()">🔍</button>
                    </span>
                            </div><!-- /input-group -->
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                </form>
            </div>
            <div class="m_search" style="margin: 12px 85px 15px 41px;">
                <div class="snote " id="ss" style="display: block"></div>
                <!--                <div class="snote " id="ss1" style="display: none"> </div>-->
                <!--                <div class="snote " id="ss2" style="display: none"> </div>-->
                <!--                <div class="snote " id="ss3" style="display: none"> </div>-->
                <!--                    搜索"周",找到-->
                <!--                    <em class="sfc">300</em>-->
                <!--                    首单曲-->

                <ul class="tabs tabs-srch" id="data" style="margin-bottom: auto;">
                    <li class="fst">
                        <a href="javascript:;" class="zs active" data-cont="l1"><em>单曲</em></a>
                    </li>
                    <!--                    <li class="fst" onclick="ss1()">-->
                    <!--                        <a href="javascript:;" class="zs " data-cont="l2"><em>歌手</em></a>-->
                    <!--                    </li>-->
                    <!--                    <li class="fst" onclick="ss2()">-->
                    <!--                        <a href="javascript:;" class="zs " data-cont="l3"><em>歌词</em></a>-->
                    <!--                    </li>-->
                    <!--                    <li class="fst" onclick="ss3()">-->
                    <!--                        <a href="javascript:;" class="zs " data-cont="l4"><em>歌单</em></a>-->
                    <!--                    </li>-->

                </ul>
                <section class="cont" id="l1" style="display:block">
                </section>
                <!--                <section class="cont" id="l2" style="display:none">-->
                <!--                </section>-->
                <!--                <section class="cont" id="l3" style="display:none">-->
                <!--                </section>-->
                <!--                <section class="cont" id="l4" style="display:none">-->
                <!--                </section>-->
            </div>
            <div id="demo-laypage-all" style="    margin-left: 78px;"></div>
        </div>

    </div>
</div>
<button onclick="topf()" class="gotop" id="topbtn" title="回顶部">回到顶部</button>
<div class="foot">
    <div class="copy">
        <p class="link" id="music-link">
            <a href="#" class="item sf">服务条款</a>
            <span class="line">|</span>
            <a href="#" class="item sf">隐私政策</a>
            <span class="line">|</span>
            <a href="#" class="item sf">儿童隐私政策</a>
            <span class="line">|</span>
            <a href="#" class="item sf">版权投诉</a>
            <span class="line">|</span>
            <a href="#" class="item sf">广告合作</a>
            <span class="line">|</span>
            <a href="#" class="item sf">联系我们</a>
            <span class="line">|</span>
        </p>
    </div>
</div>
<!--<script src="/dev/views/slx/css/search.js"></script>-->
<script src="/dev/plugins/jquery.min.js"></script>
<script src="/dev/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script src="/dev/views/slx/layui/layui.js"></script>
<script src="/dev/views/cxy/js/xiaobofang/jquery.marquee.min.js"></script>
<script>

    // 	var	playlist = [
    // // {title:name,artist:"gname",mp3:"/dev/views/cxy/music/"+name+".mp3",cover:"/dev/views/cxy/music/img/" + img,},
    // {title:"Uptown Funk",artist:"Mark Ronson",mp3:"jq22-1.mp3",cover:"t2.png",},
    // ];
    var time = localStorage.getItem('time');
    // if (time!=null)
    // {

    // }
    // if (time!=0)
    // {
    // 	var isRotate = true;
    // 	var autoplay = true;
    // 	console.log("000")
    // }

    var timet = Math.round(time)
    console.log(timet)
    if (timet != 0) {
        var isRotate = true;
        var autoplay = false;

    } else {
        var isRotate = true;
        var autoplay = false;
    }


</script>
<script src="/dev/views/cxy/js/xiaobofang/player.js"></script>
<script>

    function bgChange() {
        var lis = $('.lib');
        for (var i = 0; i < lis.length; i += 2)
            lis[i].style.background = 'rgba(246, 246, 246, 0.7)';
    }

    window.onload = bgChange;
</script>
<script>
    $(function () {
        $("#app").load('/dev/views/slx/nav.html');
    })
    // $(function (){
    //     $("#pages").load('http://localhost:8088/dev/views/slx/page.html');
    // })
    // 当网页向下滑动 20px 出现"返回顶部" 按钮
    window.onscroll = function () {
        scrollFunction()
    };

    function scrollFunction() {
        // console.log(121);
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("topbtn").style.display = "block";
        } else {
            document.getElementById("topbtn").style.display = "none";
        }
    }

    // 点击按钮，返回顶部
    function topf() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>
<script>
    var title = document.getElementById("search");
    // title.value=decodeURI(location.search.match(new RegExp("[\?\&]title=([^\&]+)", "i"))[1]);
    title.value = localStorage.getItem("title")
    var titles = title.value;
    // console.log(title)
    console.log(titles)

    // let titles =decodeURI($("songTitle_input").val());

    function search1() {
        // let titles=  document.getElementById("songTitle_input").value;
        //1. 获取文本框输入的数据
        let titles = $("#search").val();

        console.log(titles);
        $.ajax({
            type: 'get',
            url: `/dev/song/search/${titles}/1/2`,
            success: function (result) {
                if (result.code == 200) {
                    loadData4(result.data.list, titles)
                }
            }
        })
    }


    $(function () {
        let titles = $("#search").val();
        // if (titles!=null) {
        $.ajax({
            type: 'get',
            url: `/dev/song/select`,
            success: function (result) {
                if (result.code == 200) {
                    var arr = result.data
                    console.log(arr)
                    // console.log(arr[0].id)

                    loadData4(arr)
                }
            }
        })
        // }

        layui.use(function () {
            console.log("进入分页")
            var laypage = layui.laypage;
            $.get(`/dev/song/search/${titles}/1/2`, function (result) {
                loadData4(result.data.list)
                console.log(result.data)
                console.log(result.data.list)
                console.log("====================")
                laypage.render({
                    elem: 'demo-laypage-all',
                    count: `${result.data.total}`, // 数据总数
                    pageNum: result.data.pages,
                    current: result.data.pageNum,
                    limits: [2, 4, 8, 10, 20],
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                    jump: function (obj) {
                        $.get(`/dev/song/search/${titles}/${obj.curr}/${obj.limit}`, function (result) {
                            console.log("====================")
                            console.log(obj.curr)
                            console.log(obj.limit)
                            console.log(result.data)
                            console.log("=================")
                            console.log("--------------")
                            str = result.data.list
                            console.log("再一次，下一页")
                            loadData4(str)
                        })
                        console.log(obj.curr);
                    }
                });
            })
        });
    })


    //数据的渲染
    function loadData4(arr, title) {
        let s;
        // let str=` <ul class="song">`;
        if (title !== undefined) {
            s = ` 搜索"${title}",找到<em class="sfc">带"${title}"</em>的单曲`;
        } else {
            s = ` 搜索"${titles}",找到<em class="sfc">带"${titles}"</em>的单曲`;
        }
        $("#ss").html(s)
        let str = `<div class="tag">
                <div class="sr">`;
        for (let i = 0; i < arr.length; i++) {
            // console.log(i)
            // console.log(arr[i])
            if (i % 2 != 0) {
                str += `<div class="item f-cb">
                        <div class="td">
                            <div class="hd">
                                <a id="sss" class="ply" title="播放"></a>
                            </div>
                        </div>
                        <div class=" td w0">
                            <div class="sn">
                                <div class="text">
                                    <a href="http://localhost:8088/dev/views/cxy/bofang.html?id=${arr[i].id}">
                                        <b title="${arr[i].songTitle}">${arr[i].songTitle}</b>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="td">
                            <div class="opt hshow">
                                <a class="uicn uicn8" href="" title="添加到播放列表"></a>
                                <span class="icn fav" title="收藏"></span>
                                <span class="icn share" title="分享"></span>
                                <span class="icn xz" title="下载"></span>
                            </div>
                        </div>
                        <div class="td w1">
                            <div class="text">
                                <a href="http://localhost:8088/dev/views/czn/views/Introduction.html?singerName=${arr[i].singerName}">${arr[i].singerName}</a>
                            </div>
                        </div>
                        <div class="td w2">
                            <div class="text">
                                <a class="s-fc3" href="" title="看我七十二变">看我七十二变</a>
                            </div>
                            <div class="td" style="margin: -20px 9px 11px 112px;">04:54</div>
                        </div>
                    </div>
                  <div class="panel-group" id="accordion">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion"
                    href="#collapseOne">
                    点击进行展开
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>
                                 <span class="s-fc7">${arr[i].songTitle}</span>"${arr[i].singerName}"
                             </p>
                             <p style="white-space:pre-wrap;">${arr[i].lyrics}</p>
                </div>
            </div>
        </div>


    </div>`
            } else {

                str += `<div class="item f-cb even">
                        <div class="td">
                            <div class="hd">
                                <a  class="ply" title="播放"></a>
                            </div>
                        </div>
                        <div class=" td w0">
                            <div class="sn">
                                <div class="text">
                                    <a href="http://localhost:8088/dev/views/cxy/bofang.html?id=${arr[i].id}">
                                        <b title="${arr[i].songTitle}">${arr[i].songTitle}</b>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="td">
                            <div class="opt hshow">
                                <a class="uicn uicn8" href="" title="添加到播放列表"></a>
                                <span class="icn fav" title="收藏"></span>
                                <span class="icn share" title="分享"></span>
                                <span class="icn xz" title="下载"></span>
                            </div>
                        </div>
                        <div class="td w1">
                            <div class="text">
                                <a href="http://localhost:8088/dev/views/czn/views/Introduction.html?singerName=${arr[i].singerName}">${arr[i].singerName}</a>
                            </div>
                        </div>
                        <div class="td w2">
                            <div class="text">
                                <a class="s-fc3" href="" title="看我七十二变">看我七十二变</a>
                            </div>
                            <div class="td" style="margin: -20px 9px 11px 112px;">04:54</div>
                        </div>
                    </div>
                  <div class="panel-group" id="accordion">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion"
                    href="#collapseOne">
                    点击进行展开
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>
                                 <span class="s-fc7">${arr[i].songTitle}</span>"${arr[i].singerName}"
                             </p>
                             <p style="white-space:pre-wrap;">${arr[i].lyrics}</p>

                </div>
            </div>
        </div>


    </div>`
            }
        }
        str += `</div></div>`
        $("#l1").html(str)
    }

    $(function () { $('#collapseOne').collapse('hide')});

    // function showdiv()  {
    //     document.getElementById("show").style.display = "block";
    //
    //     document.getElementById('strHref').innerHTML="收起";
    //     document.getElementById('strHref').href="javascript:hidediv();";
    // }
    // function hidediv() {
    //     document.getElementById('show').style.display='none';
    //     document.getElementById('strHref').innerHTML="展开";
    //     document.getElementById('strHref').href="javascript:showdiv();";
    // }
    //     $(function () { $('#collapseOne').collapse('hide')});
    // var lrc1=document.getElementById("lrc1");
    //     var open=document.getElementById("open");
    //     var timer;
    //     var h=100;
    //     var zkid=document.getElementById("zkid");
    //   function open(){
    //         if (zkid.innerHTML==="展开"){
    //             lrc1.style.height=800+"px";
    //             zkid.innerHTML="收起";
    //         }else if(zkid.innerHTML==="收起"){
    //             lrc1.style.height=100+"px";
    //             zkid.innerHTML="展开";
    //         }
    //     }
    // var btn1 = document.getElementById('btn')
    // var spread = document.getElementById('spread')
    // var iSpread = false
    // /*高度*/
    // // var height = spread.scrollHeight+"px";
    // var height = spread.scrollHeight;
    // /*总时间*/
    // var time = 420;
    // /*间隔*/
    // var interval = 8.4
    // /*速度*/
    // var speed = height/(time/interval)
    // /*点击事件*/
    // function btn() {
    //     btn.disabled = 'disabled'
    //     if(!iSpread){
    //         var speeds = 0
    //         var timer = setInterval(function () {
    //             speeds += speed
    //             spread.height = speeds + 'px'
    //
    //             if(parseInt(spread.style.height) >=height){
    //                 clearTimeout(timer)
    //                 btn1.disabled = ''
    //             }
    //         },interval)
    //         this.innerHTML = '收起'
    //     }else {
    //         var speeds = height
    //         this.innerHTML = '展开'
    //         var timer = setInterval(function () {
    //             speeds -= speed
    //             spread.style.height = speeds + 'px'
    //             if(speeds <= 0){
    //                 clearTimeout(timer)
    //                 btn1.disabled = ''
    //             }
    //         },interval)
    //     }
    //     iSpread = !iSpread
    // }


</script>

<script>
    $(function () {
        $(".playerxiao").load('/dev/views/cxy/views/cemian.html');
    })
</script>
</body>
</html>